<!-- 【物品信息】弹窗页面 -->
<template>
  <div class="body">
    <el-dialog :title="dialog.title" :close-on-click-modal="false" :visible.sync="dialog.open">
      <el-form :model="goods" ref="goodsForm" :rules="rules" label-width="120px" class="edit-form">
        <el-form-item label="主键id" class="hidden" prop="id">
          <el-input type="hidden" v-model="goods.id"/>
        </el-form-item>
        <el-form-item label="物品名称" prop="name">
          <el-input v-model="goods.name" placeholder="请输入物品名称" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierId">
          <el-select v-model="goods.supplierId" placeholder="请选择供应商名称" filterable :disabled="dialog.disabled" class="sui-input">
            <el-option v-for="supplier in supplierDict" :key="supplier.id" :value="supplier.id" :label="supplier.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="物品类别" prop="categoryId">
          <el-select v-model="goods.categoryId" placeholder="请选择物品类别" filterable :disabled="dialog.disabled" class="sui-input">
            <el-option v-for="category in categoryDict" :key="category.id" :value="category.id" :label="category.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="物品规格" prop="specs">
          <el-input v-model="goods.specs" placeholder="请输入物品规格" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="物品价格" prop="price">
          <el-input v-model="goods.price" type="number" mini="0" placeholder="请输入物品价格" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="物品库位" prop="addr">
          <el-input v-model="goods.addr" placeholder="请输入物品库位" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="预警值" prop="warnNum">
          <el-input v-model="goods.warnNum" type="number" mini="0" placeholder="请输入预警值" :disabled="dialog.disabled" class="sui-input"/>
        </el-form-item>
        <el-form-item label="物品描述" prop="introduce">
          <el-input type="textarea" v-model="goods.introduce" placeholder="请输入物品描述" :disabled="dialog.disabled" class="sui-textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" v-if="!dialog.disabled" type="primary" @click="submitForm()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "goodsForm",
    data() {
      return {
        supplierDict:[],
        categoryDict:[],
        //弹窗设置
        dialog: {
          title: "",
          open: false,
          disabled: false
        },
        //表单数据
        goods: {
          id: "",
          name: "",
          supplierId: "",
          categoryId: "",
          specs: "",
          price: "",
          storageNum: "",
          warnNum: "",
          addr: "",
          introduce: "",
        },
        //表单校验
        rules: {
          name: [{required: true, message: '请输入物品名称', trigger: 'blur'},{validator:this.$validator.unique,form:this,model:'goods',tableName:'goods',column:'name',message:'物品名称已存在',trigger:'blur'}],
          supplierId: [{required: true, message: '请选择供应商名称', trigger: 'change'}],
          categoryId: [{required: true, message: '请选择物品类别', trigger: 'change'}],
          specs: [{required: true, message: '请输入物品规格', trigger: 'blur'}],
          addr: [{required: true, message: '请输入物品库位', trigger: 'blur'}],
          price: [{required: true, message: '请输入物品价格', trigger: 'blur'}],
          storageNum: [{required: true, message: '请输入库存量', trigger: 'blur'}],
          warnNum: [{required: true, message: '请输入预警值', trigger: 'blur'}],
          introduce: [{required: true, message: '请输入物品描述', trigger: 'blur'}],
        }
      }
    },
    computed: {
    },
    methods: {
      //【供应商名称】
      getSupplierDict() {
        this.$request.doGet('/admin/supplier/getList').then(res => {
          if (res.isOk) {
            this.supplierDict = res.list;
          }
        })
      },
      //【物品类别】
      getCategoryDict() {
        this.$request.doGet('/admin/category/getList').then(res => {
          if (res.isOk) {
            this.categoryDict = res.list;
          }
        })
      },
      //打开弹窗
      open(option) {
        const pageFrom = option.pageFrom;
        const disabled = pageFrom == 'view' ? true : false;
        this.showDialog(option.title, disabled);
        this.getSupplierDict();//加载【供应商名称】
        this.getCategoryDict();//加载【物品类别】
        if (pageFrom == 'edit' || pageFrom == 'view') {
          this.getGoods(option.id);
        }
      },
      //显示弹窗
      showDialog(title, disabled) {
        this.resetForm(this.$refs.goodsForm);//重置表单
        this.dialog.open = true;//打开弹窗
        this.dialog.title = title;//设置标题
        this.dialog.disabled = disabled;//是否可编辑
      },
      //取消弹窗
      cancel: function () {
        this.dialog.open = false;
      },
      //根据id获取数据
      getGoods(id) {
        this.$request.doGet("/admin/goods/get?id=" + id).then(res => {
          if (res.isOk) {
            this.goods = res.obj;
          }
        });
      },
      //提交表单
      submitForm: function () {
        const that = this;
        that.$refs.goodsForm.validate((valid) => {
          if (valid) {//表单校验
            that.$request.doPost('/admin/goods/sub', that.goods).then(res => {
              if (res.isOk) {
                that.cancel();
                that.showSuccess("提交成功");
                that.$emit('reloadList');
              }
            });
          }
        });
      }

    }
  }
</script>

<style scoped>

</style>
